<template>
  <div class="apply">
    <div class="common-list">
      <table class="temp-table">
        <thead>
        <tr>
          <th style="width: 200px">审批主题</th>
          <th style="cursor: pointer;width: 100px">审批人</th>
          <th style="width: 150px">状态</th>
          <th style="width: 120px">提交日期</th>
          <th style="width: 140px">操作</th>
        </tr>
        </thead>
        <tbody :style="{minHeight:HEIGHT-239+'px'}">
        <div v-for="item,index in list" :key="index">
          <tr>
            <td class="more" style="width: 200px;color: #2A97F9;cursor: pointer" title="查看审批详情"
                @click="lookDetail(item.id)">
              {{item.approvalSubject}}
            </td>
            <td style="width: 100px">{{item.approvalUserName}}</td>
            <td style="width: 150px" :class="`status${item.status}`">{{filterStatus(item.status)}}</td>
            <td style="width: 120px">{{item.createTime}}</td>
            <td style="width: 140px">
              <el-link type="primary" v-if="item.status==0" @click="cancelCheck(item)">撤销审批</el-link>
              <el-link type="primary" v-if="item.status==3||item.status==1" @click="rebackCheck(item)">重新提交</el-link>
              <el-link type="primary" v-if="item.status==3||item.status==1" @click="editCheck(item)">再次编辑</el-link>
            </td>
          </tr>
        </div>
        <tr class="empty-img" v-show="isEnd" style="background-color: #fff;border-bottom: 0">
          <td colspan="8" style="background-color: #fff;padding: 70px 0;">
            <img src="../../../../../public/img/empty.png" alt="" style="width: 300px">
          </td>
        </tr>
        </tbody>
      </table>
      <el-pagination class="fixed"
                     background align="right"
                     @current-change="handleCurrentChange"
                     @size-change="handleSizeChange"
                     :current-page="nowPage"
                     :page-size="nowSize"
                     layout="total, sizes, prev, pager, next, jumper"
                     :total="total">
      </el-pagination>
    </div>
  </div>
</template>

<script>
    import {mapState} from 'vuex'
    import {getApprovalList, cancelApproval, rebackCheck} from '@/api/approval'

    export default {
        name: "index",
        data() {
            return {
                list: [],
                nowPage: 1,
                nowSize: 20,
                total: 0,
                isEnd: false,
                HEIGHT: document.documentElement.clientHeight,
            }
        },
        computed: {
            ...mapState(['common'])
        },
        created() {
            this.nowPage = this.common.commonPage;
            this.nowSize = this.common.commonPageSize;
        },
        mounted() {
            this.getList()
        },
        methods: {
            getList() {
                const params = {
                    searchType: 0,//（0-我提交的审批，1-由我审批）
                    current: this.nowPage,
                    size: this.nowSize
                }
                getApprovalList(params).then(res => {
                    if (res.data.success) {
                        const result = res.data.data;
                        this.total = result.total;
                        this.isEnd = this.total == 0;
                        this.list = result.records;
                    }
                }).catch(err => {
                    console.log(err)
                })

            },
            //撤消审批
            cancelCheck(row) {
                this.$confirm(' <div style="margin: 20px 10px;">\n' +
                    '        <p style="line-height: 30px;\n' +
                    '        font-size: 14px;">确定要撤销主题为 <span class="more" style="color:#2A97F9">"' + row.approvalSubject + '"</span> 的审批单吗?</p></div>',
                    '撤销审批', {
                        dangerouslyUseHTMLString: true,
                        confirmButtonText: '确 认',
                        cancelButtonText: '取 消'
                    }).then(() => {
                    cancelApproval(row.id).then(res => {
                        this.dealResult(res);
                    }).catch(err => {
                        console.log(err)
                    })
                }).catch(() => {
                })
            },
            //重新提交
            rebackCheck(row) {
                this.$confirm(' <div style="margin: 20px 10px;">\n' +
                    '        <p style="line-height: 30px;\n' +
                    '        font-size: 14px;">确定重新提交主题为 <span class="more" style="color:#2A97F9">"' + row.approvalSubject + '"</span> 该审批单?</p></div>',
                    '提交审批', {
                        dangerouslyUseHTMLString: true,
                        confirmButtonText: '确 认',
                        cancelButtonText: '取 消'
                    }).then(() => {
                    rebackCheck(row.id).then(res => {
                        this.dealResult(res);
                    }).catch(err => {
                        console.log(err)
                    })
                }).catch(() => {
                })
            },
            //查看详情
            lookDetail(id){
                this.$store.commit('SET_EMAILPAGE', this.nowPage)
                this.$store.commit('SET_EMAILPAGESIZE', this.nowSize)
                this.$router.push({
                    path: '/mail/approval/apply/detail',
                    query: {
                        id: id
                    }
                })
            },
            //再次编辑/查看 - 行数据
            editCheck(row) {
                //判断类型
                this.$store.commit('SET_EMAILPAGE', this.nowPage)
                this.$store.commit('SET_EMAILPAGESIZE', this.nowSize)
                let path = '/mail/approval/apply/detail';
                if (row.status == 3 || row.status == 1) {//再次编辑
                    path = '/mail/approval/apply/edit'
                }
                this.$router.push({
                    path: path,
                    query: {
                        row: JSON.stringify(row),
                        isApprovalDetail:0
                    }
                })
            },
            dealResult(res) {//重置
                if (res.data.success) {
                    this.$message({
                        message: res.data.msg,
                        type: 'success'
                    });
                    this.handleCurrentChange(1)
                } else {
                    this.$message({
                        type: "success",
                        message: res.data.msg
                    });
                }
            },
            handleSizeChange(size) { //  条数发生改变
                this.nowSize = size
                this.$store.commit('SET_COMMONPAGE', {page: this.nowPage, pageSize: this.nowSize});
                this.getList()
            },
            handleCurrentChange(page) { //页数发生变化
                this.nowPage = page
                this.$store.commit('SET_COMMONPAGE', {page: this.nowPage, pageSize: this.nowSize});
                this.getList()
            },
            filterStatus(type) {
                switch (parseInt(type)) {
                    case 0:
                        return '审批中';
                    case 1:
                        return '已撤销';
                    case 2:
                        return '已通过';
                    case 3:
                        return '不通过';
                    default:
                        return '-'
                }
            }
        }
    }
</script>

<style scoped lang="scss">
</style>
